<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <title>用户注册</title>
    <!-- General CSS Files -->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <link rel="stylesheet" href="assets/css/app.min.css">
    <link rel="stylesheet" href="assets/bundles/bootstrap-social/bootstrap-social.css">
    <!-- Template CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/components.css">
    <!-- Custom style CSS -->
    <link rel="stylesheet" href="assets/css/custom.css">
    <link rel="stylesheet" href="assets/css/element.css">
    <link rel='shortcut icon' type='image/x-icon' href='assets/img/favicon.ico'/>
</head>

<body>
<div class="loader"></div>
<div id="app">
    <section class="section">
        <div class="container mt-5">
            <div class="row">
                <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-8 offset-xl-2">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h4>注册</h4>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="row">
                                    <div class="form-group col-6">
                                        <label for="frist_name">用户名</label>
                                        <input id="frist_name" type="text" class="form-control" name="frist_name"
                                               v-model="insertInFo.name">
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="phone">手机号</label>
                                        <input id="phone" type="text" class="form-control" name="phone" v-model="insertInFo.phone">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email">邮箱</label>
                                    <input id="email" type="email" class="form-control" name="email" v-model="insertInFo.email">
                                    <div class="invalid-feedback">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-6">
                                        <label for="password" class="d-block">密码</label>
                                        <input id="password" type="password" class="form-control pwstrength"
                                               name="password" v-model="insertInFo.password">
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="password2" class="d-block">确认密码</label>
                                        <input id="password2" type="password" class="form-control"
                                               name="password-confirm">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="button" class="btn btn-primary btn-lg btn-block"
                                            @click="userRegister()">
                                        注册
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="mb-4 text-muted text-center">
                            已经有账号了? <a th:href="@{login}">登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="手机验证码确认" :visible.sync="dialogFormVisible" :modal-append-to-body='false'>
            <el-form>
                <el-form-item label="验证码" :label-width="formLabelWidth">
                    <el-input v-model="phoneYanZhengMa" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="userInFoInsert()">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</div>
<!-- General JS Scripts -->
<script src="assets/js/jquery-3.4.1.js"></script>
<script src="assets/js/app.min.js"></script>
<!-- JS Libraies -->
<script src="assets/js/vue.js"></script>
<script src="assets/js/dataParse.js"></script>
<script src="assets/js/element.js"></script>
<script src="assets/js/axios.js"></script>
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="assets/js/scripts.js"></script>
<!-- Custom JS File -->
<script src="assets/js/custom.js"></script>
<script>
    let token = $("meta[name='_csrf']").attr("content");
    let header = $("meta[name='_csrf_header']").attr("content");
    axios.defaults.headers.common[header] = token;
    const app = new Vue({
        el: "#app",
        data() {
            return {
                insertInFo: {
                    name: "",
                    password: "",
                    phone: "",
                    email: "",
                },
                dialogFormVisible: false,
                formLabelWidth: '120px',
                phoneYanZhengMa: "",
                phoneYanzhengMaTrue:"",
            }
        },
        methods: {
            userRegister() {
                this.dialogFormVisible = true;
                axios({
                    method: "post",
                    url: "/smsverification",
                    transformRequest: [
                        function (data) {
                            return parseParams(data);
                        }
                    ],
                    data: {
                        phone: this.insertInFo.phone,
                    }
                }).then((response) => {
                    if (response.data.code === 200) {
                        this.phoneYanzhengMaTrue = response.data.data;
                    } else {
                        this.$notify.error({
                            title: '验证码发送失败',
                            message: '请检查手机号码是否正确!',
                            position: 'bottom-right'
                        });
                    }
                })
            },
            userInFoInsert(){
                if (this.phoneYanZhengMa === this.phoneYanzhengMaTrue){
                    axios({
                        method: "post",
                        url: "/userInFoInsert",
                        transformRequest: [
                            function (data) {
                                return parseParams(data);
                            }
                        ],
                        data: {
                            username: this.insertInFo.name,
                            userpasw: this.insertInFo.password,
                            userphone: this.insertInFo.phone,
                            useremail: this.insertInFo.email,
                        }
                    }).then((response) => {
                        if (response.data.success) {
                            this.$notify({
                                title: '注册成功',
                                message: '请到登录页面进行登录!',
                                position: 'bottom-right'
                            });
                            this.dialogFormVisible = false;
                        } else {
                            this.$notify.error({
                                title: '注册失败',
                                message: '请检查所填数据是否正确!',
                                position: 'bottom-right'
                            });
                        }
                    })
                }else {
                    this.$notify.error({
                        title: '验证码输入错误',
                        message: '请重新输入!',
                        position: 'bottom-right'
                    });
                }
            }
        }
    })
</script>
</body>
</html>